<template>
  <div class="company-info">
    <!-- 加载状态 -->
    <el-loading v-if="loading" :fullscreen="true" />
    
    <!-- 企业头部信息 -->
    <div class="company-header">
      <div class="company-basic">
        <div class="company-logo">
          <el-image
            v-if="companyInfo.logo"
            :src="companyInfo.logo"
            alt="企业Logo"
            fit="cover"
            class="logo-image"
          />
          <div v-else class="logo-placeholder">
            <el-icon><OfficeBuilding /></el-icon>
          </div>
        </div>
        <div class="company-details">
          <div class="company-name">
            <h1>{{ companyInfo.companyName || '暂无企业名称' }}</h1>
            <el-tag v-if="isVipCompany" type="warning" size="small" class="vip-tag">
              <el-icon><Star /></el-icon>
              VIP企业
            </el-tag>
          </div>
          <div class="company-subtitle">{{ companyInfo.shortName || '暂无简称' }}</div>
          <div class="company-attributes">
            <span class="attribute-item">
              <el-icon><OfficeBuilding /></el-icon>
              {{ companyInfo.industry || '暂无行业信息' }}
            </span>
            <span class="attribute-item">
              <el-icon><User /></el-icon>
              {{ getPeopleSizeDisplayText(companyInfo.peopleSize) || '暂无规模信息' }}
            </span>
            <span class="attribute-item">
              <el-icon><Money /></el-icon>
              {{ getNatureDisplayText(companyInfo.nature) || '暂无性质信息' }}
            </span>
            <span class="attribute-item">
              <el-icon><Document /></el-icon>
              {{ companyInfo.financStage || '暂无融资信息' }}
            </span>
          </div>
        </div>
      </div>
      <div class="company-location">
        <div class="location-info">
          <el-icon><Location /></el-icon>
          <span>{{ formatAddress() }}</span>
        </div>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧内容列 -->
      <div class="left-column">
        <!-- 企业简介 -->
        <div class="content-section">
          <div class="section-header">
            <el-icon class="section-icon"><OfficeBuilding /></el-icon>
            <h3>企业简介</h3>
          </div>
          <div class="section-content">
            <p>{{ companyInfo.introduction || '暂无企业简介' }}</p>
          </div>
        </div>

        <!-- 基本信息 -->
        <div class="content-section">
          <div class="section-header">
            <el-icon class="section-icon"><OfficeBuilding /></el-icon>
            <h3>基本信息</h3>
          </div>
          <div class="section-content">
            <div class="info-grid">
              <div class="info-item">
                <el-icon><Calendar /></el-icon>
                <div class="info-text">
                  <label>成立时间</label>
                  <span>{{ formatDate(companyInfo.buildDate) || '暂无' }}</span>
                </div>
              </div>
              <div class="info-item">
                <el-icon><Location /></el-icon>
                <div class="info-text">
                  <label>注册地址</label>
                  <span>{{ companyInfo.registPlace || '暂无' }}</span>
                </div>
              </div>
              <div class="info-item">
                <el-icon><Document /></el-icon>
                <div class="info-text">
                  <label>营业执照</label>
                  <span>{{ companyInfo.bizLicense || '暂无' }}</span>
                </div>
              </div>
              <div class="info-item">
                <el-icon><Money /></el-icon>
                <div class="info-text">
                  <label>注册资本</label>
                  <span>{{ companyInfo.registCapital || '暂无' }}</span>
                </div>
              </div>
                       <div class="info-item">
           <el-icon><User /></el-icon>
           <div class="info-text">
             <label>法人代表</label>
             <span>{{ companyInfo.legalRepresentative || '暂无' }}</span>
           </div>
         </div>
         <div class="info-item">
           <el-icon><Clock /></el-icon>
           <div class="info-text">
             <label>工作时间</label>
             <span>{{ formatWorkTime(companyInfo.workTime) || '暂无' }}</span>
           </div>
         </div>
            </div>
          </div>
        </div>

        <!-- 企业优势 -->
        <div class="content-section">
          <div class="section-header">
            <el-icon class="section-icon"><Star /></el-icon>
            <h3>企业优势</h3>
          </div>
          <div class="section-content">
            <div class="advantages-grid">
              <div 
                v-for="advantage in advantagesList" 
                :key="advantage"
                class="advantage-tag"
              >
                <el-icon><Check /></el-icon>
                {{ advantage }}
              </div>
            </div>
          </div>
        </div>

        <!-- 企业相册 -->
        <div class="content-section">
          <div class="section-header">
            <el-icon class="section-icon"><Picture /></el-icon>
            <h3>企业相册</h3>
          </div>
          <div class="section-content">
            <div class="photos-grid">
              <div 
                v-for="(photo, index) in photosList" 
                :key="index"
                class="photo-item"
              >
                <el-image
                  :src="photo"
                  alt="企业照片"
                  fit="cover"
                  :preview-src-list="photosList"
                  :initial-index="index"
                  preview-teleported
                  class="photo-image"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容列 -->
      <div class="right-column">
        <!-- VIP企业信息 -->
        <div v-if="isVipCompany" class="content-section vip-section">
          <div class="section-header">
            <el-icon class="section-icon"><Star /></el-icon>
            <h3>VIP企业</h3>
          </div>
          <div class="section-content">
            <div class="vip-info">
              <p>VIP到期时间: {{ formatDate(companyInfo.vipExpireDate) }}</p>
            </div>
          </div>
        </div>

        <!-- 福利待遇 -->
        <div class="content-section">
          <div class="section-header">
            <el-icon class="section-icon"><OfficeBuilding /></el-icon>
            <h3>福利待遇</h3>
          </div>
          <div class="section-content">
            <div class="benefits-list">
              <div 
                v-for="benefit in benefitsList" 
                :key="benefit"
                class="benefit-item"
              >
                <el-icon class="benefit-icon"><Check /></el-icon>
                {{ benefit }}
              </div>
            </div>
          </div>
        </div>

        <!-- 薪资福利 -->
        <div class="content-section">
          <div class="section-header">
            <el-icon class="section-icon"><Money /></el-icon>
            <h3>薪资福利</h3>
          </div>
          <div class="section-content">
            <div class="bonus-list">
              <div 
                v-for="bonus in bonusList" 
                :key="bonus"
                class="bonus-item"
              >
                                 <el-icon class="bonus-icon"><Check /></el-icon>
                {{ bonus }}
              </div>
            </div>
          </div>
        </div>

        <!-- 补助津贴 -->
        <div class="content-section">
          <div class="section-header">
            <el-icon class="section-icon"><Document /></el-icon>
            <h3>补助津贴</h3>
          </div>
          <div class="section-content">
            <div class="subsidy-list">
              <div 
                v-for="subsidy in subsidyList" 
                :key="subsidy"
                class="subsidy-item"
              >
                                 <el-icon class="subsidy-icon"><Check /></el-icon>
                {{ subsidy }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { 
  OfficeBuilding, 
  Picture, 
  Document, 
  Star,
  Check,
  Calendar,
  Location,
  Money,
  User,
  Clock
} from '@element-plus/icons-vue'
import { getCompanyDetailApi } from '../../api/user'
import { getDictDataKeysListByTypeKeyAndDataKeyApi } from '../../api/recourse'

const companyInfo = ref({})
const loading = ref(false)

// 字典数据存储
const dictionaryData = ref({
  company_nature: {},      // 公司性质
  staff_size: {},          // 人员规模
  overtime_situation: {},  // 加班情况
  rest_time: {},           // 休息时间
  company_advantage: {},   // 公司优势
  company_welfare: {},     // 福利待遇
  salary_benefit: {},      // 薪资福利
  subsidy_allowance: {}    // 补助津贴
})

// 计算属性
const isVipCompany = computed(() => {
  return companyInfo.value.isVip === 1 && 
         companyInfo.value.vipExpireDate && 
         new Date(companyInfo.value.vipExpireDate) >= new Date()
})

// 获取公司性质显示文本
const getNatureDisplayText = (dataKey) => {
  if (!dataKey) return ''
  const item = dictionaryData.value.company_nature[dataKey]
  return item ? item.value : dataKey
}

// 获取人员规模显示文本
const getPeopleSizeDisplayText = (dataKey) => {
  if (!dataKey) return ''
  const item = dictionaryData.value.staff_size[dataKey]
  return item ? item.value : dataKey
}

// 获取加班情况显示文本
const getOvertimeDisplayText = (dataKey) => {
  if (!dataKey) return ''
  const item = dictionaryData.value.overtime_situation[dataKey]
  return item ? item.value : dataKey
}

// 获取休息时间显示文本
const getRestTimeDisplayText = (dataKey) => {
  if (!dataKey) return ''
  const item = dictionaryData.value.rest_time[dataKey]
  return item ? item.value : dataKey
}

const advantagesList = computed(() => {
  if (!companyInfo.value.advantage) return []
  const advantages = companyInfo.value.advantage.split(' ').map(item => item.trim()).filter(Boolean)
  return advantages.map(item => {
    const advantageData = dictionaryData.value.company_advantage[item]
    return advantageData ? advantageData.value : item
  })
})

const benefitsList = computed(() => {
  if (!companyInfo.value.benefits) return []
  const benefits = companyInfo.value.benefits.split(' ').map(item => item.trim()).filter(Boolean)
  return benefits.map(item => {
    const benefitData = dictionaryData.value.company_welfare[item]
    return benefitData ? benefitData.value : item
  })
})

const bonusList = computed(() => {
  if (!companyInfo.value.bonus) return []
  const bonuses = companyInfo.value.bonus.split(' ').map(item => item.trim()).filter(Boolean)
  return bonuses.map(item => {
    const bonusData = dictionaryData.value.salary_benefit[item]
    return bonusData ? bonusData.value : item
  })
})

const subsidyList = computed(() => {
  if (!companyInfo.value.subsidy) return []
  const subsidies = companyInfo.value.subsidy.split(' ').map(item => item.trim()).filter(Boolean)
  return subsidies.map(item => {
    const subsidyData = dictionaryData.value.subsidy_allowance[item]
    return subsidyData ? subsidyData.value : item
  })
})

const photosList = computed(() => {
  if (!companyInfo.value.photos) return []
  return companyInfo.value.photos.split(',').map(item => item.trim()).filter(Boolean)
})

// 获取字典数据详情
const getDictionaryDataDetails = async () => {
  try {
    // 构建需要查询的字典数据列表
    // 注意：不同字段使用不同的分隔符
    // - 企业优势、福利待遇、薪资福利、补助津贴：使用空格分隔
    // - 企业相册：使用逗号分隔
    // - 工作时间：使用空格分隔
    const dictKeys = []
    
    // 公司性质
    if (companyInfo.value.nature && companyInfo.value.nature.trim()) {
      dictKeys.push({
        typeKey: 'company_nature',
        dataKey: companyInfo.value.nature.trim()
      })
    }
    
    // 人员规模
    if (companyInfo.value.peopleSize && companyInfo.value.peopleSize.trim()) {
      dictKeys.push({
        typeKey: 'staff_size',
        dataKey: companyInfo.value.peopleSize.trim()
      })
    }
    
    // 工作时间相关
    if (companyInfo.value.workTime && companyInfo.value.workTime.trim()) {
      const workTimeParts = companyInfo.value.workTime.split(' ').filter(part => part.trim())
      if (workTimeParts.length >= 2 && workTimeParts[1].trim()) {
        dictKeys.push({
          typeKey: 'overtime_situation',
          dataKey: workTimeParts[1].trim()
        })
      }
      if (workTimeParts.length >= 3 && workTimeParts[2].trim()) {
        dictKeys.push({
          typeKey: 'rest_time',
          dataKey: workTimeParts[2].trim()
        })
      }
    }
    
    // 公司优势相关
    if (companyInfo.value.advantage && companyInfo.value.advantage.trim()) {
      const advantageItems = companyInfo.value.advantage.split(' ').filter(item => item.trim())
      advantageItems.forEach(item => {
        if (item.trim()) {
          dictKeys.push({
            typeKey: 'company_advantage',
            dataKey: item.trim()
          })
        }
      })
    }
    
    if (companyInfo.value.benefits && companyInfo.value.benefits.trim()) {
      const benefitsItems = companyInfo.value.benefits.split(' ').filter(item => item.trim())
      benefitsItems.forEach(item => {
        if (item.trim()) {
          dictKeys.push({
            typeKey: 'company_welfare',
            dataKey: item.trim()
          })
        }
      })
    }
    
    if (companyInfo.value.bonus && companyInfo.value.bonus.trim()) {
      const bonusItems = companyInfo.value.bonus.split(' ').filter(item => item.trim())
      bonusItems.forEach(item => {
        if (item.trim()) {
          dictKeys.push({
            typeKey: 'salary_benefit',
            dataKey: item.trim()
          })
        }
      })
    }
    
    if (companyInfo.value.subsidy && companyInfo.value.subsidy.trim()) {
      const subsidyItems = companyInfo.value.subsidy.split(' ').filter(item => item.trim())
      subsidyItems.forEach(item => {
        if (item.trim()) {
          dictKeys.push({
            typeKey: 'subsidy_allowance',
            dataKey: item.trim()
          })
        }
      })
    }
    
          if (dictKeys.length > 0) {
        // 验证dictKeys的完整性
        const validDictKeys = dictKeys.filter(item => 
          item && 
          item.typeKey && 
          item.dataKey && 
          typeof item.typeKey === 'string' && 
          typeof item.dataKey === 'string' &&
          item.typeKey.trim() && 
          item.dataKey.trim()
        )
        
        if (validDictKeys.length === 0) {
          return
        }
        
        const result = await getDictDataKeysListByTypeKeyAndDataKeyApi(validDictKeys)
        if (result) {
          // 将结果按typeKey分组存储
          Object.keys(result).forEach(typeKey => {
            if (result[typeKey] && Array.isArray(result[typeKey])) {
              result[typeKey].forEach((item, index) => {
                // 添加安全检查，确保item存在且有dataKey属性
                if (item && item.dataKey && typeof item.dataKey === 'string') {
                  if (!dictionaryData.value[typeKey]) {
                    dictionaryData.value[typeKey] = {}
                  }
                  dictionaryData.value[typeKey][item.dataKey] = item
                }
              })
            }
          })
        }
      }
  } catch (error) {
    console.error('获取字典数据详情失败:', error)
    console.error('错误详情:', {
      message: error.message,
      stack: error.stack,
      name: error.name
    })
  }
}

// 获取企业信息
const fetchCompanyInfo = async () => {
  try {
    loading.value = true
    const data = await getCompanyDetailApi()
    companyInfo.value = data
    
    // 获取字典数据详情
    await getDictionaryDataDetails()
  } catch (error) {
    console.error('获取企业信息失败:', error)
  } finally {
    loading.value = false
  }
}





// 格式化地址
const formatAddress = () => {
  const { country, province, city, district, address } = companyInfo.value
  const parts = [country, province, city, district, address].filter(Boolean)
  return parts.length > 0 ? parts.join(' ') : '暂无地址信息'
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return null
  if (typeof date === 'string') return date
  if (date instanceof Date) {
    return date.toLocaleDateString('zh-CN')
  }
  // 如果是 LocalDate 格式的字符串，转换为中文格式
  return date.replace(/(\d{4})-(\d{2})-(\d{2})/, '$1年$2月$3日')
}

// 格式化工作时间
const formatWorkTime = (workTime) => {
  if (!workTime) return null
  
  const parts = workTime.split(' ')
  if (parts.length === 0) return workTime
  
  const result = []
  
  // 第一个部分是时间范围，直接显示
  if (parts[0]) {
    result.push(parts[0])
  }
  
  // 第二个部分是加班情况
  if (parts[1]) {
    const overtimeText = getOvertimeDisplayText(parts[1])
    result.push(overtimeText)
  }
  
  // 第三个部分是休息时间
  if (parts[2]) {
    const restTimeText = getRestTimeDisplayText(parts[2])
    result.push(restTimeText)
  }
  
  // 其他部分直接显示
  if (parts.length > 3) {
    result.push(...parts.slice(3))
  }
  
  return result.join(' ')
}

onMounted(() => {
  fetchCompanyInfo()
})
</script>

<style scoped>
.company-info {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* 企业头部信息 */
.company-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding: 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #dee2e6;
}

.company-basic {
  display: flex;
  gap: 1.5rem;
  flex: 1;
}

.company-logo {
  flex-shrink: 0;
}

.logo-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.logo-placeholder {
  width: 80px;
  height: 80px;
  background: #f7fafc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #718096;
  font-size: 2rem;
  border: 1px solid #e2e8f0;
}

.company-details {
  flex: 1;
}

.company-name {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.company-name h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  color: #2d3748;
}

.vip-tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}

.company-subtitle {
  color: #718096;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.company-attributes {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.attribute-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #4a5568;
  font-size: 0.9rem;
}

.company-location {
  text-align: right;
}

.location-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #606266;
  font-size: 0.9rem;
}

/* 主要内容区域 */
.main-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* 内容区块 */
.content-section {
  background: white;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #dee2e6;
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;
}

.section-icon {
  font-size: 1.25rem;
  color: #4a5568;
}

.section-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #303133;
}

.section-content {
  padding: 1.5rem;
}

/* 基本信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.info-item .el-icon {
  color: #409eff;
  font-size: 1.1rem;
}

.info-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-text label {
  font-size: 0.8rem;
  color: #909399;
  font-weight: 500;
}

.info-text span {
  font-size: 0.9rem;
  color: #303133;
  font-weight: 500;
}

/* 企业优势标签 */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}

.advantage-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 20px;
  color: #0369a1;
  font-size: 0.9rem;
  font-weight: 500;
}

.advantage-tag .el-icon {
  color: #409eff;
}

/* 企业相册 */
.photos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.photo-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
}

.photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* VIP企业样式 */
.vip-section {
  background: linear-gradient(135deg, #fff7e6 0%, #fff2d9 100%);
  border: 1px solid #ffd591;
}

.vip-info {
  text-align: center;
  color: #d46b08;
  font-weight: 500;
}

/* 福利列表 */
.benefits-list,
.bonus-list,
.subsidy-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.benefit-item,
.bonus-item,
.subsidy-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.benefit-icon {
  color: #67c23a;
  font-size: 1rem;
}

.bonus-icon {
  color: #e6a23c;
  font-size: 1rem;
}

.subsidy-icon {
  color: #909399;
  font-size: 1rem;
}



/* 响应式设计 */
@media (max-width: 1024px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  
  .company-header {
    flex-direction: column;
    gap: 1rem;
  }
  
  .company-location {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .company-info {
    padding: 1rem;
  }
  
  .company-header {
    padding: 1.5rem;
  }
  
  .company-attributes {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .advantages-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  
  .photos-grid {
    grid-template-columns: 1fr;
  }
}
</style>
